import { Directive, Input, OnInit, ElementRef, HostListener, Renderer2 } from '@angular/core';

@Directive({
  selector: '[myDirective]'
})
export class MyDirectiveDirective implements OnInit {

  @HostListener('mouseenter') onmouseenter() {
    this.setColor('blue');
  }

  @HostListener('mouseleave') onmouseleave() {
    this.setColor('red');
  }

  constructor(private ele: ElementRef, private render: Renderer2) {

  }

  ngOnInit(): void {
    this.setColor('red');
  }

  setColor(color: string) {
    this.render.setStyle(this.ele.nativeElement, 'color', color);
  }
}
